import MyIcon from '@/components/MyIcon';
import { OneModal } from '@/components/one-ui';
import { CheckCircleOutlined, CloseCircleOutlined } from '@ant-design/icons';
import { IOneModalRef } from '@/pages/type';
import { onCloseModalCommon } from '@/utils';
import { Button, Spin } from 'antd';
import React, { useImperativeHandle } from 'react';
import { Ref, useRef } from 'react';

export const TipsErrorModalNew = React.forwardRef<TipsErroNewAPI.ITipsErrorModalRef, TipsErroNewAPI.ITipsErrorModalNew>(
  ({ onClose, modalOnOK, modalTip, modalLoading, tipTextColor = '#ff000d', bodyWidth = 0.2, modalTitle = '提示' }, ref) => {
    const confirmRef: Ref<IOneModalRef> = useRef(null); //弹框的ref

    // 关闭modal
    const onCloseModal = () => {
      if (confirmRef) {
        if (confirmRef.current) {
          if (confirmRef.current.onModalCancel) {
            confirmRef.current.onModalCancel();
          }
        }
      }
    };

    useImperativeHandle(ref, () => ({
      onCloseModal: onCloseModal,
    }));

    const onOk = () => {
      modalOnOK();
      onCloseModal();
    };

    // 底部按钮
    const footerRender = () => {
      return (
        <>
          <Button icon={<CloseCircleOutlined />} onClick={() => onCloseModalCommon(confirmRef)}>
            取消
          </Button>
          <Button type={'primary'} onClick={onOk} icon={<CheckCircleOutlined />}>
            确认
          </Button>
        </>
      );
    };

    return (
      <>
        <OneModal
          ref={confirmRef}
          open={true}
          getContainer={false}
          title={
            <div style={{ display: 'flex', alignItems: 'center' }}>
              <span>{modalTitle}</span>
            </div>
          }
          width={document.body.clientWidth * bodyWidth}
          onCancel={onClose}
          bodyStyle={{
            padding: '20px 30px',
          }}
          onOk={onOk}
          confirmLoading={modalLoading}
        >
          <Spin spinning={modalLoading}>
            <div style={{ fontSize: '16px', color: tipTextColor }}>{modalTip}</div>
          </Spin>
        </OneModal>
      </>
    );
  },
);
